<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			*{
				margin: 0px;
			}
			.outer {
				width:400px;
				height: 800px;
				border: 1px solid #000000;
				display: flex;
				flex-wrap: wrap;
				align-content: center;
				/* justify-content: center; */
			}
			
			.inner{
				width: 100px;
				height: 100px;
				background: pink;
				line-height: 100px;
				text-align: center;
			}
		</style>

	</head>
	<body>

		<div class="outer">
			<div class="inner">A</div>
			<div class="inner">B</div>
			<div class="inner">C</div>
			<div class="inner">D</div>
			<div class="inner"></div>
			<div class="inner"></div>
			<div class="inner"></div>
			<div class="inner"></div>
		</div>

	</body>
</html>
